<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>留言板</title>
  </head>
  <body>
    <div id="app">
      <header>
        <h3>来, 说说你在做什么, 想什么</h3>
        <div class="head">
          <input type="text" v-model="form.userName">
          <div class="imgs" v-for="(item, index) in 9" :key="item">
            <img
              :class="{'active': form.userHeadImage === index}"
              :src="'./img' + index + '.gif'"
              @click="form.userHeadImage = index"
            >
          </div>
        </div>
        <div class="remark">
          <textarea draggable="false" v-model="form.userRemark"></textarea>
        </div>
        <div class="send">
          <p v-if="140 - remarkLength >= 0">还能输入<span>{{ 140 - remarkLength }}</span>个字</p>
          <p v-else>已超出<span>{{ remarkLength - 140 }}</span>个字</p>
          <button @click="onSend">广播</button>
        </div>
      </header>
      <main>
        <h3><span>大家在说</span></h3>
        <div class="con">
          <transition-group
            name="fade"
            tag="div"
          >
            <div class="item" v-for="(item, index) in con" :key="item.id">
              <img :src="'./img' + item.userHeadImage + '.gif'">
              <p><span>{{ item.userName }}</span>: <span>{{ item.userRemark }}</span></p>
              <p><span>{{ format(item.time * 1000) }}</span><span class="del" @click="del(index, $event)">删除</span></p>
            </div>
          </transition-group>
          <transition name="empty">
            <div class="empty" v-show="!con.length">暂无评论，快来评论吧！</div>
          </transition>
        </div>
      </main>
      <transition name="pop">
        <div class="mark" v-show="pop.isShow" @click.self="pop = {msg:'',isShow:false}">
          <div class="pop">
            <h3>提示信息:</h3>
            <p>{{ pop.msg }}</p>
            <button @click="pop = {msg:'',isShow:false}">确认</button>
          </div>
        </div>
      </transition>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

